<template>
    <div class="random-wrapper">
        <div class="form-wrapper">
            <h2>基本信息</h2>
            <div class="form-list">
                <div class="form-item">
                    <div class="label">随机活动标题名称</div>
                    <div class="content">
                        <input type="text" placeholder="输入活动标题" v-model="formData.name" />
                    </div>
                </div>
                 <div class="form-item">
                    <div class="label">随机数抽取次数</div>
                    <div class="content">
                        <step-input :num="formData.times" @change="formData.times+=$event" :max="100" :min="1" />
                    </div>
                </div>
                 <div class="form-item">
                    <div class="label">随机数最小值</div>
                    <div class="content">
                        <step-input :num="formData.min" @change="formData.min+=$event" :min="1" />
                    </div>
                </div>
                 <div class="form-item">
                    <div class="label">随机数最大值</div>
                    <div class="content">
                        <step-input :num="formData.max" :max="Infinity" @change="formData.max+=$event" :min="2" />
                    </div>
                </div>
            </div>
            <button class="submit" @click="submit">立即发布活动</button>
        </div>
        <random-box v-if="isPublish" :form="formData"></random-box>
    </div>
</template>
<script>
import RandomBox from '../components/RandomBox.vue'
import StepInput from '../components/StepInput.vue'
import dayjs from 'dayjs'
export default {
    components:{
        RandomBox,
        StepInput
    },
    data() {
        return {
            formData:{
                name:'',
                times:2,
                min:1,
                max:2,
                date:''
            },
            isPublish:false
        }
    },
    methods:{
        submit(){
            const{name,min,max} =this.formData;
            if(!name || min > max){
                alert("表单错误")
                return;
            }
            this.isPublish=true;
            this.formData.date=dayjs().format('YYYY年MM月DD日 HH:mm:ss')
        }
    }
}
</script>
<style lang="sass">
//1vw=窗口宽度的1%
//1000 100vw
//700 70vw
//响应式根本: (屏幕宽度=设计稿宽度,看到的图形元素尺寸=设计稿尺寸)
.random-wrapper
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #f1f1f1
    text-align: left
    .form-wrapper
        h2
            height: 9.2vw
            font-size: 3vw
            padding: 4vw 0 0 4vw
    .form-list
        padding: 0 4vw
        background: #fff
    .form-item
        display: flex
        justify-content: space-between
        align-items: center
        height: 13vw
        font-size: 3.4vw
        //& 表示父标签
        & + .form-item
            border-top: 1px solid #ccc
        & > div 
            flex-grow: 1
        &:first-child .content
            height: 100%
        .content
            text-align: right
    input 
        height: 100%
        width: 100%
        font-size: 3.4vw
        outline: none
        text-align: right
    .submit
        background: #73b867
        color: #fff
        width: 84.4vw
        height: 10.8vw
        border-radius: 0.6vw
        margin: 7vw 7.8vw
        font-size: 4vw
        //默认字体加粗 400
        font-weight: bold
</style>
